{% extends 'base.html' %}

{% block content %}
<div class="nodes-page__wrapper">
    <h2>Nodes Status</h2>
    <p>Connected to: {{ node_address }}</p>

    <div id="local-node-status" class="node-card">
        <div class="node-card__header">
            <div>
                <h3 class="node-card__title">Local Node Status</h3>
            </div>
            <span class="node-card__indicator node-card__indicator--active"></span>
        </div>
        <ul id="local-node-details" class="node-card__status">
            <li>Loading...</li>
        </ul>
    </div>

    <div id="other-nodes-status">
        <h3>All Nodes Status</h3>
        <div id="other-nodes-list"></div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    fetch('/api/nodes_status')
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                document.getElementById('local-node-details').innerHTML = '<li>Error: ' + data.error + '</li>';
                document.getElementById('other-nodes-list').innerHTML = '<li>Error: ' + data.error + '</li>';
            } else {
                const localNodeDetails = document.getElementById('local-node-details');
                localNodeDetails.innerHTML = `
                    <li><strong>Syncing:</strong> ${data.local_node.is_syncing}</li>
                    <li><strong>Block Number:</strong> ${data.local_node.block_number}</li>
                    <li><strong>Peer Count:</strong> ${data.local_node.peer_count}</li>
                    <li><strong>Node Version:</strong> ${data.local_node.node_version}</li>
                `;

                const otherNodesList = document.getElementById('other-nodes-list');
                otherNodesList.innerHTML = '';
                data.other_nodes.forEach(node => {
                    const nodeStatusClass = node.status === 'active' ? 'status-active' : 'status-inactive';
                    const indicatorClass = node.status === 'active' ? 'node-card__indicator--active' : 'node-card__indicator--inactive';
                    const nodeElement = document.createElement('div');
                    nodeElement.className = "node-card";
                    nodeElement.innerHTML = `
                        <div class="node-card__header">
                            <div>
                                <h3 class="node-card__title">Node Address: ${node.address}</h3>
                                <span class="node-card__indicator ${indicatorClass}"></span>
                            </div>
                            <button class="node-card__button" onclick="toggleDetails('${node.address}')">Details</button>
                        </div>
                        <ul id="details-${node.address}" class="node-card__details">
                            <li><strong>Last TIme:</strong> ${node.last_update_time}</li>
                        </ul>
                    `;
                    otherNodesList.appendChild(nodeElement);
                });
            }
        })
        .catch(error => {
            console.error('Error fetching nodes status:', error);
            document.getElementById('local-node-details').innerHTML = '<li>Error loading local node status</li>';
            document.getElementById('other-nodes-list').innerHTML = '<li>Error loading other nodes status</li>';
        });
});

function toggleDetails(nodeId) {
    const detailsElement = document.getElementById('details-' + nodeId);
    if (detailsElement.classList.contains('node-card__details--active')) {
        detailsElement.classList.remove('node-card__details--active');
    } else {
        detailsElement.classList.add('node-card__details--active');
    }
}
</script>
{% endblock %}
